<template>
    <div class="Learningcenter">
        <div class="Learningcenter-content">
            <!-- <div class="Learningcenter-content-left">
                <div class="Learningcenter-content-head">
                    <img :src="unserinfo.avatar"/>
                    <span class="Le-co-nick">{{unserinfo.nick_name}}</span>
                    <div class="Le-co-isme">
                        <label v-if="Ismember" class="Ismemebers-ceo">
                            畅聊会员
                        </label>
                        <label v-else>您还不是会员
                            <span @click="Tomemeber">开通会员</span>
                        </label>
                    </div>
                    <div class="Le-co-myProfit" >
                        <label @click="toMyProfit">我的收益</label>
                    </div>
                    <span class="Le-co-catcon" @click="Tocaticon">{{unserinfo.cat_coin}}</span>
                </div>
                <el-menu router :unique-opened=true   :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @select ="handleSelect" @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location Le-my-class"></i>
                            <span>我的课程</span>
                        </template>
                        <el-menu-item index="/views/Liveclassrooms/Personalschedule">我的课程表</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Haveseen">历史课程</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                       <template slot="title">
                            <i class="el-icon-location Le-my-con"></i>
                            <span>我的猫币</span>
                        </template>
                        <el-menu-item index="/views/Liveclassrooms/Catbalance">猫币余额</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Catcoindetails">明细</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/views/Learningcenter/Authenticationmanagement" class="menbercen">
                        <i class="el-icon-setting Le-my-memeber"></i>
                        <span slot="title">我的认证</span>
                    </el-menu-item>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-location Le-my-class"></i>
                            <span>我的圈子</span>
                        </template>
                        <el-menu-item index="/views/Liveclassrooms/Mydynamic">我的动态</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Myfriend">我的好友</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Myphotoalbum">我的相册</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/views/Learningcenter/OrganizationManagementCenter" v-if="unserinfo.mechanism_id !=0" class="menbercen">
                        <i class="el-icon-setting Le-my-memeber"></i>
                        <span slot="title">机构管理中心</span>
                    </el-menu-item>
                    <el-menu-item index="/views/Liveclassrooms/Themenberce" class="menbercen">
                        <i class="el-icon-setting Le-my-memeber"></i>
                        <span slot="title">会员中心</span>
                    </el-menu-item>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-setting Le-my-gifts"></i>
                            <span>礼物中心</span>
                        </template>
                        <el-menu-item index="/views/Liveclassrooms/Getgift">收到的礼物</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Sendgift">送出的礼物</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Contributionlist">贡献榜</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Platformcontributionlist">平台收入榜</el-menu-item>
                        <el-menu-item index="/views/Liveclassrooms/Platformincome">平台贡献榜</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div> -->
            <div class="Learningcenter-content-right">
                <div><router-view /></div>
            </div>
        </div>
        <div class="refresh" @click="Torefresh">
            <img src="/images/刷新@2x.png"/>
        </div>
        <div class="refreshs" @click="toTop">
            <img src="/images/top.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
    name:'Learningcenter',
    inject: ['reload'],
    data(){
        return{
            Ismember:false,
            dd:true,
            LiveSelectList:['推荐','儿童','少年','大学生','成年'],
            LiveSelectListIndex:0,
            DetailsClassroomList:[],
            value: '',
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"Polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            currentPage:1,
            thisindex:this.$route.query.index
        }
    },
    mounted() {
        
    },
    methods: {
        toMyProfit(){
            this.$router.push({path:'/views/Liveclassrooms/myProfit'})
        },
        Torefresh(){//刷新
            this.reload()
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        Tomemeber(){
            this.$router.push({path:'/views/Liveclassrooms/Themenberce'})
        },
        Toclassroom(e){
            this.$router.push({path:'/views/Liveclassrooms/Teachingcentercoursedetails'})
        },
        Tocaticon(){
            this.$router.push({path:'/views/Liveclassrooms/Catbalance'})
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSelect(){
            this.dd = false
        },
        checket(){
            this.$router.push({path:'/'})
        },
        chet(e){
            this.LenavListIndex = e
        },
        LiveSelect(e){
            this.LiveSelectListIndex = e
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        toTop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;// 实现滚动效果 
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        }
    }
}
</script>
<style lang="less" scoped>
    .Learningcenter{
        position: relative;
        width: 100%;
        // height: 800px;
        background: #eeeeee;
        margin: 0 auto;
        margin-top: 80px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .Learningcenter-content{
        width: 1400px;
        height: 100%;
        margin: 0 auto;
       display: flex;
    }
    .Learningcenter-content-left{
        display: inline-block;
        background: #ffffff;
        width: 20%;
        border-radius:15px;
        height: autp;
    }
    .Learningcenter-content-right{
        display: inline-block;
        min-height: 600px;
        width: 84%;
        height: 100%;
        margin-left: 15px;
        // background: #ffffff;
        border-radius: 15px;
    }
    /*侧边导航头像样式*/
    .Learningcenter-content-head{
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: 30px;
        img{
            width: 48.15%;
            height: 11.4%;
            border-radius: 100px;
        }
    }
    .Le-co-nick{
        display: block;
        font-size:28px;
        color: #545454;
        font-weight: bold;
    }
    .Le-co-myProfit{
        color: #47CECF;
        font-size: 14px;
        margin-top: 14px;
        label{
            cursor: pointer;
        }
    }
    .Le-co-isme{
        margin-top: 20px;
    }
    .Le-co-isme label{
        color: #C2C2C2;
        font-size: 12px;
        span{
            display: inline-block;
            width:40%;
            height:24px;
            line-height: 24px;
            border:1px solid rgba(71,206,207,1);
            border-radius:12px;
            color: #47CECF;
            margin-left: 4%;
            cursor: pointer;
        }
    }
    .Le-co-catcon{
        display:block;
        width: 80%;
        height: 50px;
        line-height: 50px;
        background:rgba(71,206,207,1);
        border-radius:25px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        color: #FFFFFF;
        font-size: 18px;
        background-image: url('/images/形状 1 拷贝 2.png');
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position-x: 28%;
        background-position-y: 50%;
        padding-left: 20px;
        cursor: pointer;
    }
    /*侧边导航样式*/
    .Learningcenter-content-left{//样式穿透去更改element的样式
        /deep/ .el-submenu__title{
            font-weight: bold;
            font-size: 18px!important;
        }
        /deep/ .el-menu-item{
            list-style-type: disc;
            list-style-position: inside;
            padding-left: 20px!important;
            width: 100%;
            min-width: 0;
            text-align: left;
        }
        /deep/.el-submenu {
            text-align: left;
        }
        /deep/.el-menu{
            border-right:#f00 ;
            height: auto;
            border-radius: 20px;
        }
        .menbercen{
            list-style: none;
            font-weight: bold;
            font-size: 18px;
        }
    }
    /*侧边导航标题icon*/
    /deep/.Le-my-class::before{
        content:'';
        display: block;
        background-image: url('/images/我的课程.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;
    }
    /deep/.Le-my-con::before{
        content:'';
        display: block;
        background-image: url('/images/我的猫币.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        background-size:cover;  
    }
    /deep/.Le-my-contd::before{
        content:'';
        display: block;
        background-image: url('/images/我的认证.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    /deep/.Le-my-study::before{
        content:'';
        display: block;
        background-image: url('/images/我的学习.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    /deep/.Le-my-memeber::before{
        content:'';
        display: block;
        background-image: url('/images/会员中心.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    /deep/.Le-my-gifts::before{
        content:'';
        display: block;
        background-image: url('/images/礼物中心.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    .Ismemebers-ceo{
        position: relative;
        display: block;
        width: 40%;
        margin: 0 auto;
        height: 30px;
        line-height: 30px;
        border:1px solid rgba(71,206,207,1);
        border-radius:15px;
        font-size: 14px!important;
        color: #47CECF!important;
        cursor: pointer;
    }
    /*内容样式*/
   /*底部刷新按钮*/
    .refresh{
        position: fixed;
        right: 200px;
        bottom: 90px;
        cursor: pointer;
        width: 41px;
        height: 37px;
        img{
            width: 100%;
        }
    }
    .refreshs{
        position: fixed;
        right: 200px;
        bottom: 40px;
        cursor: pointer;
        width: 41px;
        height: 37px;
        img{
            width: 100%;
        }
    }
</style>